<template>
  <div v-if="lists && lists.length>0">
    <div class="area-header" style="margin-top: 15px;">
      <span class="area-header-title">{{ $t(fileTitle) }}</span>
    </div>
    <table class="previewTable">
      <thead>
        <th v-if="configDownloadEnabled" style="width: 50px !important;min-width: 50px;">
          <el-checkbox v-model="all" @change="choiceSelection($event, { choiceStatus: all, id: '', isMain: true })" />
        </th>
        <th>{{ $t('文件分类') }}</th>
        <th>{{ $t('附件名称') }}</th>
        <slot name="th-name-after" />
        <th>{{ $t('备注') }}</th>
        <th v-if="isShowUserInfo">{{ $t('上传人') }}</th>
        <th v-if="isShowUserInfo">{{ $t('上传时间') }}</th>
      </thead>
      <tbody>
        <tr v-for="(v, ind) in lists" :key="ind">
          <td v-if="configDownloadEnabled" style="width: 50px !important;min-width: 50px;">
            <el-checkbox v-model="v.choiceStatus" @change="choiceSelection($event, v)" />
          </td>
          <td>{{ $t(v.directoryName) }}</td>
          <td>
            <a class="link_a" @click="onlinePreview(v, 'view')"> {{ v.name }}</a>
          </td>
          <slot name="td-name-after" :row="v" :index="ind" />
          <td>{{ v.remark }}</td>
          <td v-if="isShowUserInfo">{{ v.updateBy.nickName }}</td>
          <td v-if="isShowUserInfo">{{ parseTime(v.createTime) }}</td>
        </tr>
      </tbody>
    </table>
    <el-tooltip v-model="batchDownloadSwitch" :manual="true" :content="$t('请先选择有效附件, 再进行批量下载')" placement="right">
      <el-button v-if="configDownloadEnabled" :loading="batchDownloadLoading" style="margin-top: 10px;" type="primary" icon="el-icon-download" size="mini" @click="batchDownload">{{ $t('下载') }}</el-button>
    </el-tooltip>
    <!-- 预览附件 -->
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>
<script>
import { downLoadZip } from '@/utils/zipdownload'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fileTitle: {
      type: String,
      default: '附件信息'
    },
    // 是否展示上传人/上传时间
    isShowUserInfo: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      lists: [],
      all: false,
      previewTit: this.$t('附件预览'),
      configDownloadEnabled: true,
      choiceArr: [],
      batchDownloadLoading: false,
      batchDownloadSwitch: false
    }
  },
  computed: {
  },
  watch: {
    list(val) {
      this.lists = val
      if (this.lists !== null && this.lists !== undefined) {
        for (var i = 0; i < this.lists.length; i++) {
          if (this.lists[i].dataType === null) {
            this.lists[i].dataType = this.dataType
          }
        }
      }
    }
  },
  mounted() {
  },
  created() {
    // 全局下载开关
    this.getConfigKeyToDownload('enable_download').then(response => {
      this.configDownloadEnabled = (response.msg === 'true')
    })
  },
  methods: {
    // 预览附件
    onlinePreview(row, type) {
      var fileId = ((row.id === undefined || row.id === null || row.id === '') ? row.fileSource : row.id)
      this.$refs.OnlinePreview.onlinePreviewFile(fileId, type)
    },
    choiceSelection(status, val) {
      this.$nextTick(() => {
        this.choiceArr = []
        if (val.isMain === true) {
          this.lists.forEach(item => {
            item.choiceStatus = status
            if (status) {
              this.choiceArr.push(item)
            }
          })
        } else {
          this.lists.forEach(item => {
            if (item.choiceStatus) {
              this.choiceArr.push(item)
            }
          })
        }
        this.$forceUpdate()
        console.log('选中了,', this.choiceArr)
      })
    },
    batchDownload() {
      if (this.isEmpty(this.choiceArr)) {
        this.batchDownloadSwitch = true
        setTimeout(() => {
          this.batchDownloadSwitch = false
        }, 2000)
      } else {
        console.log('批量下载', this.choiceArr)
        var fileIds = []
        this.choiceArr.forEach(item => {
          var fileId = item.id || item.fileId || item.fileSource
          fileIds.push(fileId)
        })
        downLoadZip('/file/fileBase/common/downloadZip?fileId=' + fileIds, this)
      }
    },
    downloadOpenLoading() {
      this.batchDownloadLoading = true
    },
    downloadProgress() {
    },
    downloadCloseLoading() {
      this.batchDownloadLoading = false
    }
  }
}
</script>
